import { View, Text, Image } from '@tarojs/components'
import styles from './index.module.scss'

import iconStar from '@/static/icons/star.svg'
import iconCpu from '@/static/icons/cpu.svg'
import iconAccessibilitySymbol from '@/static/icons/accessibility-symbol.svg'
import iconRunning from '@/static/icons/running.svg'
import iconHand from '@/static/icons/hand.svg'
import iconLogOut from '@/static/icons/log-out.svg'
import imgAvatar from '@/static/fake/avatar.png'
import imgTodoImg from '@/static/fake/todo-img.png'
import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'

export default function Index() {
    const [userInfo, setUserInfo] = useState<any>(null)

    useEffect(() => {
        let userInfo = Taro.getStorageSync('userInfo')
        if (!userInfo) {
            Taro.showToast({
                title: '请先登录',
                icon: 'error',
                duration: 2000,
            })
            Taro.redirectTo({
                url: '/pages/login/index',
            })
        }
        setUserInfo(JSON.parse(userInfo))
    }, [])

    const handleLogOut = () => {
        Taro.removeStorageSync('userInfo')
        Taro.showToast({
            title: '退出成功',
            icon: 'success',
            duration: 2000,
            complete: () => {
                Taro.redirectTo({
                    url: '/pages/login/index',
                })
            },
        })
    }

    return (
        <View className={styles.container}>
            <View className={styles.avatar}>
                <Image src={userInfo ? userInfo.avatarUrl : imgAvatar} />
            </View>
            <View className={styles.username}>
                <Text>{userInfo ? userInfo.nickname : '未登录'}</Text>
            </View>
            <View className={styles.tel}>
                <Text>Tel: 86-1536465127</Text>
            </View>
            <View className={styles.card}>
                <View className={styles.cardImg}>
                    <Image src={imgTodoImg} />
                </View>
                <View>
                    <View className={styles.cardTitle}>健康档案</View>
                    <View className={styles.cardSubTitle}>
                        肘关节炎术后康复
                    </View>
                    <View className={styles.cardExtra}>
                        膝关节炎术后1周开始训练
                    </View>
                </View>
            </View>
            <View className={styles.horizon}></View>
            <View className={styles.list}>
                <View className={styles.listItem}>
                    <View className={styles.listItemIcon}>
                        <Image src={iconStar} className='icon' />
                    </View>
                    <View className={styles.listItemText}>我的收藏</View>
                </View>
                <View className={styles.listItem}>
                    <View className={styles.listItemIcon}>
                        <Image src={iconCpu} className='icon' />
                    </View>
                    <View className={styles.listItemText}>设备与应用</View>
                </View>
                <View className={styles.listItem}>
                    <View className={styles.listItemIcon}>
                        <Image src={iconAccessibilitySymbol} className='icon' />
                    </View>
                    <View className={styles.listItemText}>身体测试</View>
                </View>
                <View className={styles.listItem}>
                    <View className={styles.listItemIcon}>
                        <Image src={iconRunning} className='icon' />
                    </View>
                    <View className={styles.listItemText}>难度测试</View>
                </View>
                <View className={styles.listItem}>
                    <View className={styles.listItemIcon}>
                        <Image src={iconHand} className='icon' />
                    </View>
                    <View className={styles.listItemText}>帮助</View>
                </View>
                <View className={styles.listItem + ' ' + styles.red}>
                    <View className={styles.listItemIcon}>
                        <Image src={iconLogOut} className='icon' />
                    </View>
                    <View
                        onClick={handleLogOut}
                        className={styles.listItemText}
                    >
                        退出登录
                    </View>
                </View>
            </View>
        </View>
    )
}
